<template>
  <div class="salesGroupSetModal">
     <FormPanel
        ref="formPanel"
        :list="formList"
        :cols="2"
        formType="add"
        :isSubmitBtn="false"
        @formChange="formChangeHandle"
      />

      <div style="text-align: center">
        <!-- :left-default-checked="[2, 3]"
          :right-default-checked="[1]" 
          filterable
          -->
        <el-transfer
          style="text-align: left; display: inline-block"
          v-model="value"
          :render-content="renderFunc"
          :titles="['组成员', '其他成员']"
          :button-texts="['到左边', '到右边']"
          :format="{
            noChecked: '${total}',
            hasChecked: '${checked}/${total}'
          }"
          @change="handleChange"
          :data="data">
          <!-- <el-button class="transfer-footer" slot="left-footer" size="small">操作</el-button>
          <el-button class="transfer-footer" slot="right-footer" size="small">操作</el-button> -->
        </el-transfer>
      </div>
      <div :style="{position: 'absolute',
        left: 0,
        bottom: 0,
        right: 0,
        zIndex: 9,
        borderTop: '1px solid #e9e9e9',
        padding: '10px 20px',
        background: '#fff',
        textAlign: 'right'}"
      >
          <el-button size="small" @click="closeHandler">关闭</el-button>
          <el-button size="small" @click="saveHandle">保存</el-button>
      </div>
  </div>
</template>
<script>
import { dictionary } from '@/utils/dictMixin';
export default {
  name: 'salesGroupSetModal',
  mixins: [dictionary],
  data() {
    const generateData = _ => {
        const data = [];
        for (let i = 1; i <= 15; i++) {
          data.push({
            key: i,
            label: `备选项 ^ ${ i }`,
            // disabled: i % 4 === 0
          });
        }
        return data;
      };
    return {
      formList: this.createFormList(),
      data: generateData(),
      value: [1,2,3],
      renderFunc(h, option) {
        return <span>{ option.label }</span>;
      }
    };
  },
  methods: {
    createFormList() {
      return [
        {
          type: 'INPUT',
          label: '组名',
          fieldName: 'packageId',
          placeholder: '请输入组名',
          rules: [{ required: true, message: '请输入组名', trigger: 'blur' }],
        },
        {
          type: 'INPUT',
          label: '说明',
          fieldName: 'vehicleMark',
          placeholder: '请输入说明',
          maxlength: 100,
          rules: [{ required: true, message: '请输入说明', trigger: 'blur' }]
        },
       
      ];
    },
    handleChange(value, direction, movedKeys) {
      console.log(value, direction, movedKeys);
    },
    saveHandle(){
      let data = this.$refs.formPanel.SUBMIT_FORM()
      console.log(data,"saveHandle",this.value)
      // this.closeHandler()
    },
    closeHandler(){
      this.$emit('close',false,'refresh')
    },
    
  },
  mounted() {
  
  },
  created() {
  }
};
</script>

<style lang="less" >
.salesGroupSetModal{
  .el-transfer-panel{
    width: 320px;
  }
}

</style>
